<template>
	<swiper indicator-dots="true"
		autoplay="true" interval="5000" duration="1000" :style="{height:bannerHeight + 'px'}">
	  <block v-for="(item, index) in banner" :key="index">
	    <swiper-item>
	      <image :src="item" mode="aspectFill" class="swiper-image" @click="showGoods"/>
	    </swiper-item>
	  </block>
	</swiper>
	<view class="func-area">
		<view bindtap="showCategories">
			<image src="/static/images/mall/icon_all.png" mode="aspectFill" class="orange" />
			<text>全部分类</text>
		</view>
		<view bindtap="showOrders">
			<image src="/static/images/mall/icon_shopping.png" mode="aspectFill" class="blue" />
			<text>我的订单</text>
		</view>
	</view>
	<!-- hot goods -->
	<view class="container-goods">
		<view class="caption">热卖推荐</view>
		<view class="main-goods">
			<view class="single-goods" v-for="(item, index) in goods" :key="index" @click="showDetail" :data-index="index">
				<view class="goodsImg">
					<image class="avatar" :src="item.avatar" mode="aspectFill" />
				</view>
				<text class="title">{{item.title}}</text>
				<view class="summary">
					<text class="price">￥{{item.price}}</text>
					<text class="sale" style="width: fit-content;flex-shrink: 0;">已售999件</text>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { ref } from "vue"; // 引入响应式函数ref
	export default {
		setup() { //为一个函数
			//定义变量 
			let banner = ref([
				'/static/images/mall/banner1.jpg',
				'/static/images/mall/banner2.jpg'
			]);
			let goods = ref([
				{avatar: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 999},
				{avatar: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 999},
				{avatar: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 999},
				{avatar: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 999},
			]);
			let bannerHeight = ref(0);
			
			uni.getSystemInfo({
				success: function (res) {
					bannerHeight.value = Math.ceil(290.0 / 750.0 * res.screenWidth)
				}
			})
			
			const showGoods = () => {
				uni.navigateTo({
					url: '/pages/mall/home/goods/detail/detail'
				});
			};
			
			const showDetail = () => {
				uni.navigateTo({
					url: '/pages/mall/home/goods/detail/detail'
				});
			}
			
			return { //setup函数返回值为一个对象
				banner,
				goods,
				bannerHeight,
				showGoods,
				showDetail
			}
		}
	}
</script>

<style>
	page {
		background: #eee;
	}
	
	.swiper-image {
		width: 100%;
		height: 100%;
	}
	
	/*功能区*/
	.func-area {
		display: flex;
		flex-direction: row;
		margin: 20rpx 0;
		padding-top: 30rpx;
		background: white;
	}
	
	.func-area view {
		width: 50%;
		text-align: center;
	}
	
	.func-area text{
		display: block;
		color: #333;
		font-size: 36rpx;
		line-height: 90rpx;
	}
	
	.func-area image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}
	
	.orange {
		background: #f60;
	}
	
	.blue {
		background: #09f;
	}
	
	/*主商品区*/
	.container-goods {
		background: white;
	}
	
	.container-goods .caption {
		font-size: 32rpx;
		width: 100%;
		line-height: 60rpx;
		text-indent: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}
	
	.main-goods {
	    display: flex;
		justify-content: space-between;
		border-top: 1px solid #eee;
		background: white;
		width:100%;
		padding:30rpx 25rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
	}
	
	.main-goods .single-goods {
		display:flex;
		flex-direction: column;
		width: 48%;
		margin-bottom: 30rpx;
	}
	
	.main-goods .goodsImg{
		position:relative;
		width:100%;
		padding-bottom: 100%;
	}
	
	.main-goods .goodsImg image {
		position: absolute;
		left:0;
		topt:0;
		width: 100%;
		height: 100%;
	}
	
	.main-goods .title {
		display: block;
		color: #999;
		font-size: 28rpx;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
		padding:15rpx 0;
	}
	
	.main-goods .summary {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.main-goods .summary text {
		font-size: 28rpx;
	}
	
	.main-goods .summary .price {
		color: red;
	}
	
	.main-goods .summary .sale {
		color: gray;
	}
</style>
